<template>
	<view class="cu-modal" :class="visible ? 'show' : ''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{ title }}</view>
			</view>
			<view class="padding-xl">
				<view class="cu-form-group margin-top">
					<input placeholder="扫码输入" :focus="visible" 
					:value="value" 
					@input="
						e => {
							value = (e.detail.value + '').toUpperCase();
						}
					"
					name="input" @confirm="onInputConfirm" />
				</view>
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<!-- <button class="cu-btn line-green text-green" @tap="hideModal">取消</button> -->
					<button class="cu-btn bg-green margin-left" @tap="onCloseTap">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		title: String
		// visible: {
		// 	type: Boolean,
		// 	default() {
		// 		return false;
		// 	}
		// }
	},
	data() {
		return {
			visible: false,
			value: '',
			focus:false,
			selectionStart:-1,
			selectionEnd:-1
		};
	},
	watch:{
		'value':function(newVal,oldVal){
			this.selectionStart= -1
			this.selectionEnd =-1
		}
	},
	methods: {
		show() {
			this.visible = true;
			this.value = '';
			this.focus = true;
		},
		hide() {
			this.visible = false;
			this.focus = false
		},
		onInputConfirm() {
			if(!this.value) return
			this.$emit('confirm', this.value);
			this.$nextTick(()=>{
				this.value=''
				// this.selectionStart = 0;
				// this.selectionEnd = this.value.length-1
			})
		
		}
		,onCloseTap(){
			this.visible = false
			this.$emit('close')
		}
	}
};
</script>
